<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用vue写的日历组件</title>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<style>
		.wrap{
			width: 800px;
			border: 1px solid #ccc;
			margin: 100px auto;
			background-color: #ECF0F5;
		}
		.sel-part{
			position: relative;
		}
		.sel-part-time{
			font-size: 0;
		}
		.sel-part-time button{
			border-radius: 0;
		}
		.sel-part-text{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.sel-part-text span{
			font-size: 18px;
		}
		.sel-part-go{
			font-size: 0;
		}
		.sel-part-go button{
			border-radius: 0;
		}
		.show-part{
			margin-top: 20px;
		}
		.year-style{
			border: 1px solid #557FAA;
			display: inline-block;
			width: 32%;
			height: 150px;
			text-align: center;
			line-height: 150px;
			font-size: 40px;
			border-radius: 5px;
			color: #4D81BD;
			margin-bottom: 4px;
			transition: all .2s;

		}
		.year-style:hover,.month-style:hover{
			background-color: #337AB7;
			color: #fff;
		}
		.month-style{
			border: 1px solid #557FAA;
			display: inline-block;
			width: 24%;
			height: 150px;
			text-align: center;
			line-height: 150px;
			font-size: 40px;
			border-radius: 5px;
			margin-bottom: 4px;
			color: #4D81BD;
			transition: all .2s;
		}
		.day-style{
			display: inline-block;
			border: 1px solid #ABC3DE;
			width: 150px;
			height: 150px;
			position: relative;
			margin-bottom: -1px;
			margin-left: -1px;
		}
		.day-style>p{
			background-color: #337AB7;
			margin: 0;
			height: 26px;
			color: #fff;
			line-height: 26px;
		}
		.task-show{
			position: absolute;
			top: 26px;
			width: 100%;
			height: 122px;
			overflow-y: auto;
			padding: 10px;
		}
		.task-show p{
			margin: 2px 0;
		}
		/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
.scroll-style ::-webkit-scrollbar  
{  
    width: 7px;  
}     
/*定义滑块 内阴影+圆角*/  
.scroll-style ::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;   
    background-color: #C1C3C6;  
}  
	</style>
</head>
<body>

<div class="wrap" id="app">
	<div class="container-fluid scroll-style">
		<div class="sel-part clearfix">
			<div class="sel-part-time pull-left">
				<button type="button" class="btn btn-primary">日</button>
				<button type="button" class="btn btn-primary" @click="goMonthPart">月</button>
				<button type="button" class="btn btn-primary" @click="goYearPart">年</button>
			</div>
			<div class="sel-part-go pull-right" v-if="!showMonthFlag">
				<button type="button" class="btn btn-primary" @click="backOne">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</button>
				<button type="button" class="btn btn-primary" @click="nextOne">
					<span class="glyphicon glyphicon-chevron-right"></span>
				</button>
			</div>
			<div class="sel-part-text">
				<span v-show="isShowYear">{{currentYear}}年</span>
				<span v-show="currentMonth">{{getM}}月</span>
			</div>
		</div>
		<div class="show-part">
			<div class="show-part-year text-center" v-show="showYearFlag" @click="selectWhich">
				<div class="year-style">{{getY-4}}</div>
				<div class="year-style">{{getY-3}}</div>
				<div class="year-style">{{getY-2}}</div>
				<div class="year-style">{{getY-1}}</div>
				<div class="year-style">{{getY}}</div>
				<div class="year-style">{{getY+1}}</div>
				<div class="year-style">{{getY+2}}</div>
				<div class="year-style">{{getY+3}}</div>
				<div class="year-style">{{getY+4}}</div>
			</div>
			<div class="show-part-month text-center" v-show="showMonthFlag" @click="selectWhich">
				<div class="month-style">1</div>
				<div class="month-style">2</div>
				<div class="month-style">3</div>
				<div class="month-style">4</div>
				<div class="month-style">5</div>
				<div class="month-style">6</div>
				<div class="month-style">7</div>
				<div class="month-style">8</div>
				<div class="month-style">9</div>
				<div class="month-style">10</div>
				<div class="month-style">11</div>
				<div class="month-style">12</div>
			</div>
			<div class="show-part-day" v-show="showDayFlag">
				<div class="day-style" v-for="(item,ind) in allDay">
					<p class="text-center">{{item}}</p>
					<div class="task-show">
						<p v-for="(item,ind2) in allTask[ind+1]">{{ind2}}.{{item}}</p>
					</div>
				</div>			
			</div>
		</div>
	</div>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
<!-- <script src="./lib/vue.min.js"></script> -->
<script>
/**
 * @Describe: 基于vue.js的日历组件
 * @Author: Linrq
 * @Create: 2018-04-26 19:30
 * @Dependences vue.js,bootstrap
 */

new Vue({
    el: "#app",
    data:{
    	currentYear: 0,   //当前的年份
    	currentMonth: 0,  //当前的月份
    	showYearFlag: false,   //是否展示年的内容
    	showMonthFlag: false,  //是否展示月的内容
    	showDayFlag: false,    //是否展示日的内容
    	allDay: [],            //某年某月的天数
    	isShowYear:false,      //默认加载,是否显示年份文本
    	allTask:{}             //特定天数对应的任务内容
    },
    methods:{
    	/**
    	 * 利用事件委托,将对应表格绑定对应点击事件
    	 * @function
    	 * @param {obj} event 事件的event对象
    	 */
    	selectWhich:function(event){
    		//年份表格的点击事件
    		if(event.target.className === "year-style"){


    			this.switchPart(false,true,false);
    			this.isShowYear = true;
    			this.currentYear = parseInt(event.target.innerHTML);

    		//月份表格的点击事件
    		}else if(event.target.className === "month-style"){

    			this.switchPart(false,false,true);
    			this.currentMonth = parseInt(event.target.innerHTML);
    			this.allDay = [];
    			this.allDay = this.getDaysByYearMonth(this.currentYear,this.currentMonth);
    			
    			this.getTask();
    		}
    	},
    	/**
    	 * 获取指定年月的天数
    	 * @function
    	 * @param {number} year 某年
    	 * @param {number} month 某月
    	 */
    	getDaysByYearMonth:function(year,month){
    		var arr = [];   
    		var temp = new Date(year,month,0).getDate(); 
    		
    		for(var i = 1;i <= temp; i++){
    			arr.push(i);
    		}
    		return arr;
    	},
    	/**
    	 * 获取指定年月日的对应任务
    	 * @function
    	 */
    	getTask:function(){
    		this.allTask = {};

    		//没有http,用假数据模拟一下
    		var ajaxHttp = this.currentYear+"-"+this.currentMonth;
    		switch(ajaxHttp){
    			case this.mock.daytime:
    			this.allTask = this.mock.resultDate;
    			break;
    			case this.mock2.daytime:
    			this.allTask = this.mock2.resultDate;
    			break;
    			case this.mock3.daytime:
    			this.allTask = this.mock3.resultDate;
    			break;
    			case this.mock4.daytime:
    			this.allTask = this.mock4.resultDate;
    			break;
    			default: break;
    		}

    	// 	$.ajax({
    	// 	    url: "xxxxxxxxx",
    	// 		type: "get",
    	// 		data:{
    	// 			daytime: this.currentYear+"-"+this.currentMonth
    	// 		}
 				// dataType: "json",
 				// success:function(res){
 				// 	this.allTask = res.resultDate
 				// },
 				// error:function(){

 				// }
    	// 	});
    	},
    	/**
    	 * 控制对应的内容显示或隐藏
    	 * @function
    	 * @param {boolean} s1 控制年份内容的显示或隐藏
    	 * @param {boolean} s2 控制月份内容的显示或隐藏
    	 * @param {boolean} s3 控制日内容的显示或隐藏
    	 */
    	switchPart:function(s1,s2,s3){
    		this.showYearFlag = s1;
    		this.showMonthFlag = s2;
    		this.showDayFlag = s3;
    	},
    	/**
    	 * 显示月份内容
    	 * @function
    	 */
    	goMonthPart:function(){
    		if(!this.isShowYear){
    			return;
    		}
    		this.switchPart(false,true,false);
    		this.currentMonth = 0;
    	},
    	/**
    	 * 显示年份内容
    	 * @function
    	 */
    	goYearPart:function(){
    		this.switchPart(true,false,false);
    		this.isShowYear = false;
    		this.currentMonth = 0;
    	},
    	/**
    	 * 控制下一年和下一月的变化
    	 * @function
    	 */
    	nextOne:function(){
    		//年份内容的逻辑
    		if(this.showYearFlag && !this.showMonthFlag && !this.showDayFlag){
    			this.currentYear = this.currentYear + 9;

    		}else{
    			//天数内容的逻辑
    			this.allDay = [];
    			this.currentMonth++;
    			if(this.currentMonth > 12){
    				this.currentYear++;
    				this.currentMonth = 1;
    			}
    			this.allDay = this.getDaysByYearMonth(this.currentYear,this.currentMonth);
    			this.getTask();

    		}
    	},
    	/**
    	 * 控制上一年和上一月的变化
    	 * @function
    	 */
    	backOne:function(){
    		//年份内容的逻辑
    		if(this.showYearFlag && !this.showMonthFlag && !this.showDayFlag){
    			this.currentYear = this.currentYear - 9;
    		}else{
    			//天数内容的逻辑
    			this.allDay = [];
    			this.currentMonth--;
    			if(this.currentMonth < 1){
    				this.currentYear--;
    				this.currentMonth = 12;
    			}
    			this.allDay = this.getDaysByYearMonth(this.currentYear,this.currentMonth);
    			this.getTask();
    		}
    	}
    },
    computed:{
    	getY:function(){
    		return parseInt(this.currentYear);
    	},
    	getM:function(){
            if(this.currentMonth < 10){
                return "0"+this.currentMonth;
            }else{
                return this.currentMonth;
            }
        }
    },
    created:function(){
    	//默认打开,显示年份内容
    	this.showYearFlag = true;

    	//获取现在的年份
    	this.currentYear = new Date().getFullYear();

    	//一堆假数据
 		this.mock = {
 			//这个放在返回数据里面,模拟传参数那个效果
 			"daytime": "2018-1",
 			"resultDate":{
 				"3":["3号有安排"],
 				"6":["6号有安排"],
 				"7":["7号有安排","7号有安排","7号有安排","7号有安排","7号有安排"],
 				"8":["8号有安排","8号有安排"],
 				"9":["9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排"],
 				"10":["10号有安排","10号有安排","10号有安排"],
 				"12":["12号有安排"]
 			}
 		};
 		this.mock2 = {
 			"daytime": "2018-5",
 			"resultDate":{
 				"3":["3号有安排"],
 				"6":["6号有安排"],
 				"7":["7号有安排","7号有安排","7号有安排","7号有安排","7号有安排"],
 				"8":["8号有安排","8号有安排"],
 				"9":["9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排"],
 				"10":["10号有安排","10号有安排","10号有安排"],
 				"12":["12号有安排"]
 			}
 		};
 		this.mock3 = {
 			"daytime": "2018-6",
 			"resultDate":{
 				"3":["3号有安排"],
 				"6":["6号有安排"],
 				"7":["7号有安排","7号有安排","7号有安排","7号有安排","7号有安排"],
 				"8":["8号有安排","8号有安排"],
 				"9":["9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排"],
 				"10":["10号有安排","10号有安排","10号有安排"],
 				"12":["12号有安排"]
 			}
 		};
 		this.mock4 = {
 			"daytime": "2018-11",
 			"resultDate":{
 				"3":["3号有安排"],
 				"6":["6号有安排"],
 				"7":["7号有安排","7号有安排","7号有安排","7号有安排","7号有安排"],
 				"8":["8号有安排","8号有安排"],
 				"9":["9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排","9号有安排"],
 				"10":["10号有安排","10号有安排","10号有安排"],
 				"12":["12号有安排"]
 			}
 		};
    	
    }
});

</script>
</body>
</html>